<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/horder.css">
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>订单</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="8%" class="nav-bar">
            <div class="logo-container">
                <!-- 信息 -->
                <div class="logo-item" @click="navigation(1)">
                    <svg height="50" width="50" class="logo">
                        <svg t="1715589930950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="9947" width="50" height="50">
                            <path
                                    d="M575.68 736a160.32 160.32 0 1 0 160.32-160.32H599.893333c-13.461333 0-24.192 10.752-24.192 24.192V736zM736 533.333333A202.666667 202.666667 0 1 1 533.333333 736V599.893333A66.432 66.432 0 0 1 599.872 533.333333H736zM490.666667 736a202.666667 202.666667 0 1 1-202.666667-202.666667h136.128A66.432 66.432 0 0 1 490.666667 599.872V736z m-202.666667-160.32a160.32 160.32 0 1 0 160.32 160.32V599.893333c0-13.44-10.730667-24.192-24.192-24.192H288zM533.333333 287.978667A202.666667 202.666667 0 1 1 736 490.666667H599.893333A66.432 66.432 0 0 1 533.333333 424.128V288z m202.666667 160.341333a160.32 160.32 0 1 0-160.32-160.32v136.128c0 13.44 10.730667 24.192 24.192 24.192H736zM448.32 288a160.32 160.32 0 1 0-160.32 160.32h136.128c13.461333 0 24.192-10.752 24.192-24.192V288zM288 490.666667A202.666667 202.666667 0 1 1 490.666667 288v136.128A66.432 66.432 0 0 1 424.128 490.666667H288z"
                                    fill="#e6e6e6" p-id="9948"></path>
                        </svg>
                    </svg>
                    <span style="color: #e6e6e6;">信息</span>
                </div>
                <!-- 统计 -->
                <div class="logo-item" @click="navigation(2)">
                    <svg height="50" width="50" class="logo">
                        <svg t="1715589137588" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="5353" width="50" height="50">
                            <path
                                    d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m326.4 128l56.8 512H192l56.8-512"
                                    p-id="5354" fill="#e6e6e6"></path>
                            <path d="M447.2 352.8H384V416h63.2v-63.2zM640 352.8h-63.2V416H640v-63.2z" p-id="5355"
                                  fill="#e6e6e6"></path>
                        </svg>
                    </svg>
                    <span style="color: #e6e6e6;">统计</span>
                </div>
                <!-- 集市 -->
                <div class="logo-item" @click="navigation(3)">
                    <svg height="50" width="50" class="logo">
                        <svg t="1715589228580" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="6429" width="50" height="50">
                            <path
                                    d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z"
                                    fill="#e6e6e6" p-id="6430"></path>
                            <path
                                    d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z"
                                    fill="#e6e6e6" p-id="6431"></path>
                            <path
                                    d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z"
                                    fill="#e6e6e6" p-id="6432"></path>
                            <path
                                    d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z"
                                    fill="#e6e6e6" p-id="6433"></path>
                            <path
                                    d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z"
                                    fill="#e6e6e6" p-id="6434"></path>
                            <path
                                    d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z"
                                    fill="#e6e6e6" p-id="6435"></path>
                        </svg>
                    </svg>
                    <span style="color: #e6e6e6;">集市</span>
                </div>
                <!-- 售卖 -->
                <div class="logo-item" @click="navigation(4)">
                    <svg height="50" width="50" class="logo">
                        <svg t="1715589429644" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="7489" width="50" height="50">
                            <path
                                    d="M586.945923 513.581008c55.067176-27.962865 92.91211-85.125773 92.91211-150.998039 0-93.338828-75.937506-169.276335-169.277358-169.276335s-169.275311 75.937506-169.275311 169.276335c0 65.872267 37.844933 123.034151 92.911086 150.998039-95.652524 32.016181-164.778904 122.45496-164.778904 228.743728 0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707c0-110.36869 89.791026-200.160739 200.160739-200.160739S710.741413 631.956046 710.741413 742.324736c0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707C751.723803 636.035968 682.598446 545.598212 586.945923 513.581008zM382.287753 362.582969c0-70.742181 57.552787-128.293945 128.292921-128.293945 70.742181 0 128.293945 57.552787 128.293945 128.293945 0 70.741157-57.552787 128.292921-128.293945 128.292921C439.84054 490.876913 382.287753 433.324126 382.287753 362.582969z"
                                    fill="#e6e6e6" p-id="7490"></path>
                            <path
                                    d="M827.871087 196.127889C743.498468 111.757317 631.320573 65.290005 512 65.290005S280.500509 111.756293 196.128913 196.127889C111.756293 280.501532 65.291029 392.678404 65.291029 511.998977s46.465265 231.499491 130.837884 315.872111 196.550515 130.837884 315.871087 130.837884 231.498468-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 511.998977 912.243707 280.500509 827.871087 196.127889zM512 917.726581c-223.718271 0-405.726581-182.007287-405.726581-405.727605 0-223.718271 182.00831-405.726581 405.726581-405.726581s405.726581 182.007287 405.726581 405.726581C917.726581 735.719294 735.718271 917.726581 512 917.726581z"
                                    fill="#e6e6e6" p-id="7491"></path>
                        </svg>
                    </svg>
                    <span style="color: #e6e6e6;">售卖</span>
                </div>
                <!-- AI -->
                <div class="logo-item" @click="navigation(5)">
                    <svg height="50" width="50" class="logo">
                        <svg t="1715589731055" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="8858" width="50" height="50">
                            <path
                                    d="M928 257.7H768v-97.4c0-35.3-28.7-64-64-64H320c-35.3 0-64 28.7-64 64v97.4H96c-17.7 0-32 14.3-32 32v606c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32v-606c0-17.7-14.3-32-32-32z m-608-97.4h384v97H320v-97z m576 703.4H128v-271h281v60c0 17.7 14.3 32 32 32h142c17.7 0 32-14.3 32-32v-60h281v271z m-423-243v-120h78v120h-78z m423-92H615v-60c0-17.7-14.3-32-32-32H441c-17.7 0-32 14.3-32 32v60H128v-207h768v207z"
                                    fill="#1296db" p-id="8859"></path>
                        </svg>
                    </svg>
                    <span style="color: #1296db;">订单</span>
                </div>
            </div>
        </el-aside>
        <el-main>
            <el-row>
                <el-col :span="16">
                    <h1>我卖出的</h1>
                    <el-table :data="orderBySeller">
                        <!-- 表格列 -->
                        <el-table-column prop="id" label="ID"></el-table-column>
                        <el-table-column prop="commodity" label="商品名称"></el-table-column>
                        <el-table-column prop="buyer" label="购买村户"></el-table-column>
                        <el-table-column prop="datetime" label="下单时间"></el-table-column>
                        <el-table-column label="图片1">
                            <template slot-scope="scope">
                                <img :src="scope.row.img1" alt="图片" style="width: 100px; height: auto;">
                            </template>
                        </el-table-column>
                        <el-table-column label="图片2">
                            <template slot-scope="scope">
                                <img :src="scope.row.img2" alt="图片" style="width: 100px; height: auto;">
                            </template>
                        </el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                               <div v-if="scope.row.state === 0">
                                    未成交
                               </div>
                                <div v-else>
                                    成交完毕
                                </div>
                            </template>
                        </el-table-column>
                        <!-- 其他表格列 -->
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <h1>我买入的</h1>
                    <el-table :data="orderByBuyer">
                        <!-- 表格列 -->
                        <el-table-column prop="id" label="ID"></el-table-column>
                        <el-table-column prop="commodity" label="商品名称"></el-table-column>
                        <el-table-column prop="seller" label="售卖村户"></el-table-column>
                        <el-table-column prop="datetime" label="下单时间"></el-table-column>
                        <el-table-column label="图片1">
                            <template slot-scope="scope">
                                <img :src="scope.row.img1" alt="图片" style="width: 100px; height: auto;">
                            </template>
                        </el-table-column>
                        <el-table-column label="图片2">
                            <template slot-scope="scope">
                                <img :src="scope.row.img2" alt="图片" style="width: 100px; height: auto;">
                            </template>
                        </el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <div v-if="scope.row.state === 0">
                                    未成交
                                </div>
                                <div v-else>
                                    成交完毕
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <div v-if="scope.row.state === 0">
                                    <el-button type="primary" size="small" @click="dealOrder(scope.row.id)">点击成交<i class="el-icon-check el-icon--right"></i></el-button>
                                </div>
                                <div v-else>
                                    <el-button disabled type="primary" size="small">点击成交<i class="el-icon-check el-icon--right"></i></el-button>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- 其他表格列 -->
                    </el-table>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                token: null,
                orderBySeller: [],
                orderByBuyer: [],
            }
        },
        mounted() {
            this.recordToken();
        },
        methods: {
            //获取token
            recordToken() {
                this.token = localStorage.getItem('token');
                this.getOrderBySeller();
                this.getOrderByBuyer();
            },

            //导航栏
            navigation(num) {
                if (num === 1) {
                    window.location.href = "./hold_account.html";
                } else if (num === 2) {
                    window.location.href = "./hold_questionnaire.html";
                } else if (num === 3) {
                    window.location.href = "./hold_commodity.html";
                } else if (num === 4) {
                    window.location.href = "./hold_by.html";
                } else {
                    window.location.href = "./hold_order.html";
                }
            },

            //查询自己是卖家的订单
            getOrderBySeller() {
                try {
                    axios.get('http://localhost:8080/order/seller', {
                        headers: {
                            'token': this.token
                        },
                    }).then(response => {
                        const responseData = response.data;
                        this.orderBySeller = responseData.data;
                    });
                } catch (error) {
                    console.error('查询购买订单失败：', error);
                }
            },

            //查询自己是买家的订单
            getOrderByBuyer() {
                try {
                    axios.get('http://localhost:8080/order/buyer', {
                        headers: {
                            'token': this.token
                        },
                    }).then(response => {
                        const responseData = response.data;
                        this.orderByBuyer = responseData.data;
                    });
                } catch (error) {
                    console.error('查询售卖订单失败：', error);
                }
            },

            //成交订单
            dealOrder(id) {
                this.$confirm('订单将被签收, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    try {
                        try {
                            axios.put('http://localhost:8080/order/' + id, {}, {
                                headers: {
                                    'token': this.token
                                },
                            }).then(response => {
                                this.$message({
                                    showClose: true,
                                    message: "更改状态成功！",
                                    type: 'success'
                                });
                                // 刷新当前页面
                                location.reload();
                            });
                        } catch (error) {
                            console.error('失败：', error);
                        }
                    } catch (error) {
                        console.error('删除接口调用失败：', error);
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }


        }
    })
</script>
</html>